<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/../../../../Ui/editor/css/editormd.preview.css}"/>
    <link th:replace="blog/common::head">
    <link rel="stylesheet" th:href="@{/admin/css/bc.css}">
    <title>博客详情</title>
    <style>
        a {
            text-decoration: none;
            color: #000000;
            transition: 0.2s;
        }

        a:hover {
            transform: scale(1.2);
            color: #ffb700;
        }

        a:hover span {
            display: block !important;
        }

        .aaa {
            color: #ff7700;
        }

        .bbb {
            float: right;
        }

    </style>

</head>
<body style="background-color:  rgb(250, 249, 222)">
<div th:include="blog/common::top"></div>
<div style="width: 100%;height: 60px"></div>
<div>
    <!--文章主体内容-->
    <div id="doc-content" style="width: 75%;margin: 0 auto">
        <textarea style="display:none;" placeholder="markdown" th:text="${blog.getContent()}"></textarea>
    </div>
</div>
<div style="width: 73%;margin: 0 auto">
    <div class="row" id="demo" style="height: 100px;background-color: #cacaca;margin-top: 20px;border-radius: 20px;overflow: auto">
        <div style="margin: 10px" th:each="comment,stute:${commentList}">
            <div>评论 [[${stute.count}]]:</div>
            <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[[${comment.getContent()}]]</div>
        </div>
    </div>
</div>


<div class="row">
    <div class="col-xs-2 col-xs-offset-9">
        <div class="row">
            <div class="col-xs-2">
                <div class="col-xs-1 col-xs-offset-10">
                    <i onclick="f()" class="layui-icon layui-icon-dialogue"
                       style="font-size: 30px; color: #000000;"></i>
                </div>
            </div>
            <div class="col-xs-4" style="margin-top: 5px">
                <a th:href="@{/Praise/newPraise/}+${session.id}+'/'+${blog.getBCid}"
                   class="glyphicon glyphicon-thumbs-up col-xs-offset-10" style="font-size: 26px!important;"
                   th:classappend="${isPraise} ?aaa">
                    <span style="display: none;font-size: 1px">谢谢</span>
                </a>
            </div>
            <div class="col-xs-4" style="font-size: 26px" th:classappend="${isPraise} ?aaa">
                [[${blog.getPraiseCount()}]]
            </div>
        </div>

        <div style="text-align: center;display: none" id="textarea">
            <form style="height: 200px;width: 100%" action="/InsertComment" class="layui-form" method="post">
                <div class="layui-form-item">
                    <input type="text" hidden="hidden" th:value="${session.id}" name="userId">
                    <input type="text" hidden="hidden" th:value="${blog.getBCid}" name="bId">
                    <textarea style="width: 300px" name="comment" required ></textarea>
                    <input type="submit" class="layui-btn layui-btn-normal" style="float: right" onblur="f2()">
                </div>
            </form>
        </div>

    </div>

</div>

<script th:src="@{/../../../../Ui/editor/examples/js/jquery.min.js}"></script>
<script th:src="@{/../../../../Ui/editor/lib/marked.min.js}"></script>
<script th:src="@{/../../../../Ui/editor/lib/prettify.min.js}"></script>
<script th:src="@{/../../../../Ui/editor/lib/raphael.min.js}"></script>
<script th:src="@{/../../../../Ui/editor/lib/underscore.min.js}"></script>
<script th:src="@{/../../../../Ui/editor/lib/sequence-diagram.min.js}"></script>
<script th:src="@{/../../../../Ui/editor/lib/flowchart.min.js}"></script>
<script th:src="@{/../../../../Ui/editor/lib/jquery.flowchart.min.js}"></script>
<script th:src="@{/../../../../Ui/editor/editormd.min.js}"></script>
<script type="text/javascript">
    var testEditor;
    $(function () {
        testEditor = editormd.markdownToHTML("doc-content", {//注意：这里是上面DIV的id
            htmlDecode: "style,script,iframe",
            emoji: true,
            taskList: true,
            tocm: true,
            tex: true, // 默认不解析
            flowChart: true, // 默认不解析
            sequenceDiagram: true, // 默认不解析
            codeFold: true
        });
    });
</script>
<script>
    function f2() {
        window.location.reload();
    }
</script>

<script>
    function f() {
        document.getElementById("textarea").style.display = "block"
    }
</script>
</body>
</html>